<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 31401
  Date: 2024/6/24
  Time: 15:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c1" %>
<html>
<head>
    <title>Title</title>
    <style>
        /* 下拉菜单样式 */
        .dropdown {
            position: relative;
            display: inline-block; /* 使下拉菜单作为内联块级元素显示 */
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9; /* 下拉菜单背景色 */
            min-width: 160px; /* 菜单最小宽度 */
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 阴影效果 */
            z-index: 1; /* 确保下拉菜单在页面最上层 */
            border-radius: 5px;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block; /* 使链接作为块级元素显示 */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1; /* 鼠标悬停时背景色 */
        }

        .dropdown:hover .dropdown-content {
            display: block; /* 当鼠标悬停在下拉按钮上时显示下拉菜单 */
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff; /* 背景色设为白色 */
            color: #000; /* 文本颜色设为黑色 */
        }

        /* 头部样式 */
        .header {
            background-color: sandybrown; /* 头部背景色设为深灰色 */
            color: #fff; /* 头部文本颜色设为白色 */
            padding: 10px 0; /* 内边距 */
            text-align: center; /* 文本居中 */
        }

        .logo {
            display: inline-block; /* 让logo作为内联块级元素显示 */
            height: 40px; /* 假设的logo高度 */
            width:40px; /* 假设的logo宽度 */
            background-image: url('img/logo2.png'); /* 替换为你的logo图片路径 */
            background-size: cover; /* 图片完全覆盖logo区域 */
            margin-right: 20px; /* 与右侧标题保持间距 */
            vertical-align: middle; /* 垂直居中 */
        }

        .headerright {
            display: inline-block; /* 让右侧部分作为内联块级元素显示 */
            vertical-align: middle; /* 垂直居中 */
        }

        .headerright h1 {
            margin: 0; /* 去除标题的默认外边距 */
        }

        /* 导航栏样式 */
        .nav {
            background-color: #f0f0f0; /* 导航栏背景色设为浅灰色 */
            border-top: 1px solid #ccc; /* 上边框颜色 */
            padding: 10px 0; /* 内边距 */
            text-align: center; /* 文本居中 */
        }

        .nav ul {
            list-style: none; /* 去除列表的默认样式 */
            margin: 0; /* 去除外边距 */
            padding: 0; /* 去除内边距 */
            display: flex; /* 使用Flex布局使列表项水平排列 */
            justify-content: center; /* 水平居中 */
        }

        .nav ul li {
            display: inline-block; /* 列表项作为内联块级元素显示 */
            margin: 0 30px; /* 列表项之间的间距 */
        }

        .nav ul li a {
            color: #000; /* 链接颜色设为黑色 */
            text-decoration: none; /* 去除下划线 */
            padding: 5px 10px; /* 内边距 */
            display: inline-block; /* 作为内联块级元素显示，以便应用内边距和背景色等 */
            border-radius: 5px; /* 圆角 */
            transition: background-color 0.3s ease; /* 背景色过渡效果 */
        }

        .nav ul li a:hover {
            background-color: #ccc; /* 鼠标悬停时背景色变为浅灰色 */
        }
        /* 被选中的导航链接样式 */
        .nav ul li a.active {
            background-color: #ccc; /* 被选中时的背景色 */
            color: #333; /* 被选中时的文字颜色 */
            border: 1px solid #999; /* 添加边框以突出显示 */
        }
    </style>
</head>
<body>
<div class="header con">
    <div class="logo"></div>
    <div class="headerright">
        <div>
            <h1>绒享蛋糕订购</h1>
        </div>
    </div>
</div>
<div class="nav">
    <ul class="con" style="align-content: center">
        <!-- 一级导航栏 -->
        <li class="dropdown">
            <a href="javascript:void(0)">商品菜单</a>
            <div class="dropdown-content">
                <!-- 二级导航栏，循环生成的下拉菜单项 -->
                <c1:forEach items="${sessionScope.goodsType}" var="menu1">
                    <a href="GoodsMenu?typeId=${menu1.typeId}">${menu1.typeName}</a>
                </c1:forEach>
            </div>
        </li>
        <li><a href="login.jsp">登录</a> </li>
        <li><a href="register.jsp">注册</a> </li>
        <li><a href="cartlist.jsp">购物车</a> </li>
        <li><a href="order_list.jsp">我的订单</a> </li>
    </ul>
</div>
</body>
</html>
